<template>
  <!-- 
    <section class="site-page-title">
    <div class="site-page-title-content text-center">
      <div class="container">
        <div class="subtitle">News Details</div>
        <div class="title">Blog Post</div>
      </div>
    </div>
  </section> 
  -->
  <section class="site-content">
    <div class="container">
      <div class="row">
        <!-- 文章区域 -->
        <div class="content-area col-md-9">
          <!-- 
            <component
            :is="currentComponent"
            :keyword="keyword"
            :category="category"
            :postId="postId"
            ref="detail"
          ></component> 
          -->

          <router-view ref="detail" :key="$route.fullPath"></router-view>
        </div>
        <!-- 侧边栏区域 -->
        <div class="widget-area col-md-3">
          <!--  -->
          <div class="widget widget-search">
            <form>
              <input type="search" placeholder="Search*" v-model="keyword" />
              <button
                type="botton"
                class="fa fa-search"
                @click.prevent="onBlogSearch"
              ></button>
            </form>
          </div>
          <!--  -->
          <div class="widget widget-category">
            <div class="widget-title">Category</div>
            <ul>
              <li>
                <a @click="changeCategory('5')">All</a>
              </li>
              <template v-for="(item, index) in blogCategoryList" :key="index">
                <li>
                  <a @click="changeCategory(item.id)">{{ item.name }}</a>
                </li>
              </template>
            </ul>
          </div>
          <!--  -->
          <!-- 
            <div class="widget widget-newsletter">
            <div class="wrapper">
              <div class="widget-title">News letter</div>
              <div class="subtitle">Enter your email address for getting daily news letter</div>
              <a-form class="newsletter-form">
                <a-form-item>
                  <a-input type="text" placeholder="Name*" />
                </a-form-item>
                <a-form-item>
                  <a-input type="text" placeholder="Email*" />
                </a-form-item>
                <a-form-item>
                  <button type="primary" html-type="submit">Submit</button>
                </a-form-item>
              </a-form>
            </div>
          </div> 
          -->
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import BlogList from "./blog-list.vue";
import BlogDetail from "./blog-detail.vue";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  ref,
  computed,
} from "vue";
export default {
  name: "BlogIndex",
  components: {
    blogList: BlogList,
    blogDetail: BlogDetail,
  },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      keyword: "",
      category: 5,
      currentComponent: "blogList",
      blogCategoryList: computed(() => proxy.$store.getters.blogCategoryList),
      postId: 0,
    });
    const refData = toRefs(data);
    //
    let detail = ref(null);
    //
    onBeforeMount(() => {
      data.keyword = proxy.$route.query.keyword
        ? proxy.$route.query.keyword
        : "";
      data.category = proxy.$route.query.category
        ? proxy.$route.query.category
        : 5;
    });
    onMounted(() => {
      // if (proxy.$route.params.id) {
      //   console.log(proxy.$route.params.id);
      //   methods.jumpDetail(proxy.$route.params.id);
      // }
    });
    //

    //
    const methods = {
      onBlogSearch() {
        // data.currentComponent = "blogList";
        // proxy.$nextTick(() => {
        //   console.log(detail.value);
        //   // detail.value.getList();
        // });
        proxy.$router.push({
          path: "/blog",
          query: {
            keyword: data.keyword,
            category: data.category,
          },
        });
      },
      changeCategory(id) {
        data.category = id;
        this.onBlogSearch();
      },

      //
      jumpDetail(id) {
        data.postId = id;
        data.currentComponent = "blogDetail";
      },
      //
      backList() {
        // data.currentComponent = "blogList";
      },
    };
    //

    return {
      ...refData,
      ...methods,
      detail,
    };
  },
};
</script>
<style lang="scss" scoped>
/* .site-page-title {
  position: relative;
  min-height: 298px;
  overflow: hidden;
  background: url("~@/assets/image/blog-banner.jpg") center no-repeat;
  background-size: cover;
}

.site-page-title-content {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.site-page-title-content .subtitle {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.site-page-title-content .title {
  font-size: 70px;
  font-weight: 300;
  letter-spacing: -2px;
} */

.site-content {
  padding: 100px 0;
}

.widget-area {
  .widget {
    margin-bottom: 95px;
  }

  .widget:last-child {
    margin-bottom: 0;
  }

  .widget-title {
    font-size: 25px;
    line-height: 1;
    color: #464d50;
    margin-bottom: 25px;
  }

  .widget.widget-search {
    margin-bottom: 35px;

    form {
      position: relative;
    }

    input[type="search"] {
      width: 100%;
      border: 2px solid #e4eaec;
      border-radius: 30px;
      font-size: 1rem;
      padding: 1rem 2rem;
    }

    button {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 30px;
      padding: 0 26px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }
  }

  .widget-category {
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    li:first-child {
      padding-top: 0;
    }

    li {
      position: relative;
      border-bottom: 1px solid #e4eaec;
      padding: 15px 0;
      line-height: 1;
    }

    li:before {
      content: "\f178";
      color: #05cbb8;
      display: inline-block;
      margin-right: 20px;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      -webkit-font-smoothing: antialiased;
    }
  }

  .widget-newsletter {
    padding: 30px 30px 50px;
    background-color: #f6b237;
    text-align: center;
    color: #fff;

    .widget-title {
      color: #fff;
      margin: 10px 0 20px;
      text-transform: uppercase;
      font-size: 25px;
      font-weight: 600;
      line-height: 1;
    }

    .subtitle {
      font-size: 16px;
      font-weight: 500;
      font-style: italic;
      line-height: 20px;
      margin-bottom: 40px;
    }

    .ant-form .ant-form-item {
      margin-bottom: 5px;
    }

    .ant-form button {
      border: none;
      background: #f6b237;
      width: 100%;
      border-radius: 30px;
      padding: 1.25rem 0;
      -webkit-box-shadow: 0 10px 30px 0 rgba(67, 22, 39, 0.32);
      -moz-box-shadow: 0 10px 30px 0 rgba(67, 22, 39, 0.32);
      box-shadow: 0 10px 30px 0 rgba(67, 22, 39, 0.32);
    }

    .newsletter-form {
      input[type="text"] {
        width: 100%;
        border-radius: 30px;
        padding-left: 50px;
        padding: 15px;
      }
    }
  }
}
</style>
